<template>
  <div style="padding: 49px 36px 0 36px" class="flex">
    <dataCard title="未下发课程账号明细" height="919" width="1848">
      <div class="trainerBox" style="padding: 46px 0 0 11px">
        <el-form
          @submit.native.prevent
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          label-width="100px"
        >
          <el-form-item label="门店名称" prop="schoolIds">
            <el-select
              v-model="queryParams.schoolIds"
              multiple
              collapse-tags
              filterable
              clearable
            >
              <!-- <el-option label="全部" value=""></el-option> -->
              <el-option
                v-for="item in schools"
                :key="item.schoolId"
                :label="item.schoolName"
                :value="item.schoolId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="员工姓名" prop="nickName">
            <el-input
              v-model="queryParams.nickName"
              placeholder="请输入员工姓名"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            ></el-input>
          </el-form-item>
          <!-- 账号 -->
          <el-form-item label="账号" prop="phoneNumber">
            <el-input
              v-model="queryParams.phoneNumber"
              placeholder="请输入账号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            ></el-input>
          </el-form-item>
          <el-form-item label="岗位" prop="postIds">
            <el-select
              v-model="queryParams.postIds"
              multiple
              collapse-tags
              filterable
              clearable
            >
              <!-- <el-option label="全部" value=""></el-option> -->
              <el-option
                v-for="item in posts"
                :key="item.postId"
                :label="item.postName"
                :value="item.postId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="账号创建时间">
            <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              v-preventReClick
              type="primary"
              plain
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button
              v-preventReClick
              icon="el-icon-refresh"
              size="mini"
              @click="resetQuery"
              >重置</el-button
            >
            <el-button
              v-preventReClick
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              >导出</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          ref="tableRef"
          style="margin: 5px 0 5px 0"
          height="665"
          border
          v-loading="loading"
          :data="postList"
        >
          <el-table-column
            show-overflow-tooltip
            label="门店名称"
            align="center"
            prop="schoolName"
          />
          <el-table-column
            show-overflow-tooltip
            label="员工姓名"
            align="center"
            prop="nickName"
          />
          <el-table-column
            show-overflow-tooltip
            label="账号"
            align="center"
            prop="phoneNumber"
          />
          <el-table-column
            show-overflow-tooltip
            label="岗位名称"
            align="center"
            prop="postNames"
          />
          <el-table-column
            show-overflow-tooltip
            label="账号创建时间"
            align="center"
            prop="createTime"
          />
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </dataCard>
  </div>
</template>
    
  <script>
import {
  noCourseUserList,
  schoolList,
  postList,
} from "@/api/screen/courseLearningManagement";
import dataCard from "./components/dataCard";
export default {
  components: {
    dataCard,
  },
  data() {
    return {
      value1: "",
      loading: false,
      postList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 14,
        schoolIds: [],
        postIds: [],
        startTime: undefined,
        endTime: undefined,
        nickName: undefined,
        phoneNumber: undefined,
      },
      total: 10,
      schools: [],
      posts: [],
    };
  },
  mounted() {
    this.getList();
    this.getSchoolList();
    this.getPostList();
  },

  methods: {
    async getPostList() {
      let res;
      try {
        res = await postList({ pageNum: 1, pageSize: 9999 });
        if (res.code == 200) {
          this.posts = res.rows;
          // 页面数据更新后，让表格滚动条回到顶部
          this.$nextTick(() => {
            if (this.$refs.tableRef) {
              this.$refs.tableRef.bodyWrapper.scrollTop = 0;
            }
          });
        }
      } finally {
      }
    },
    async getSchoolList() {
      let res;
      try {
        res = await schoolList({ pageNum: 1, pageSize: 9999 });
        if (res.code == 200) {
          this.schools = res.rows;
        }
      } finally {
      }
    },
    async getList() {
      let res;
      try {
        this.loading = true;
        console.log(this.value1);
        let params = { ...this.queryParams };
        params.startTime = this.value1 ? this.value1[0] : "";
        params.endTime = this.value1 ? this.value1[1] : "";
        params.postIds =
          params.postIds && params.postIds.length > 0
            ? params.postIds.join(",")
            : "";
        params.schoolIds =
          params.schoolIds && params.schoolIds.length > 0
            ? params.schoolIds.join(",")
            : "";
        res = await noCourseUserList(params);
        if (res.code == 200) {
          this.postList = res.rows;
          this.total = res.total;
        }
      } finally {
        this.loading = false;
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.value1 = "";
      this.queryParams = {
        pageNum: 1,
        pageSize: 15,
        schoolId: undefined,
        postId: undefined,
        startTime: undefined,
        endTime: undefined,
        nickName: undefined,
        phoneNumber: undefined,
      };
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      let params = { ...this.queryParams };
      params.postIds =
        params.postIds && params.postIds.length > 0
          ? params.postIds.join(",")
          : "";
      params.schoolIds =
        params.schoolIds && params.schoolIds.length > 0
          ? params.schoolIds.join(",")
          : "";
      this.download(
        "/screen/course/exportNoCourseUserList",
        {
          ...params,
        },
        `exportPlatformCourseList_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
    
    <style>
</style>